<template>
  <div style="margin: 20px">
    <el-card class="box-card">
      <h1>添加菜品</h1>
      <el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="菜品名称" prop="foodName">
          <el-input v-model="addForm.foodName"></el-input>
        </el-form-item>
        <el-form-item label="菜品价格" prop="price">
          <el-input v-model="addForm.price"></el-input>
        </el-form-item>
        <el-form-item label="菜品介绍" prop="introduce">
          <el-input v-model="addForm.introduce"></el-input>
        </el-form-item>
        <el-form-item label="菜品类型" prop="introduce">
          <el-select v-model="addForm.foodType" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜品封面" prop="savepath">
          <el-upload
            ref="upload"
            class="upload-demo"
            action="http://localhost:8080/upload/imgUpload"
            :on-change="handleChange"
            :on-success="handleSuccess"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addFood">确定添加</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "addFood",
  data(){
    return{
      addForm: {},
      rules: {
        foodName:[{ required: true, message: '请输入食品名称', trigger: 'blur' }],
        price:[{ required: true, message: '请输入价格', trigger: 'blur' }],
        introduce:[{ required: true, message: '请输入简介', trigger: 'blur' }],
        foodType:[{ required: true, message: '请输选择类型', trigger: 'blur' }],
        savepath:[{ required: true, message: '请上传图片', trigger: 'blur' }]
      },
      options: [{value: 1, label: "清蒸"},{value: 2, label: "水煮"},{value: 3, label: "爆炒"},{value: 4, label: "甜品"}],
    }
  },
  methods:{
    handleChange(file, fileList){
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
      // console.info(file)
      // this.imageUrl = URL.createObjectURL(file.raw);
      // console.info(this.imageUrl)
    },
    handleSuccess(response){
      this.$message.success("上传文件成功！")
      console.info(response.data)
      let path = response.data
      this.addForm.savepath = path
    },
    addFood(){
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.axios.post("http://localhost:8080/food/add", this.addForm).then(res => {
            if (res.data.code == 200) {
              this.$message.success("添加成功！")
              this.$refs.addForm.resetFields();
              this.addForm = {}
              this.$refs.upload.clearFiles()
            }
          })
        }else {
          this.$message.error("请完善信息")
        }
      })

    },
    resetForm(formName) {
      this.$refs.addForm.resetFields();
    }
  }
}
</script>

<style scoped>

</style>
